<template>
  <div>
    <div>
      <el-carousel :autoplay="false" indicator-position="outside" style="width: 600px;margin: 0 auto;">
        <el-carousel-item v-for="item in 4" :key="item" style="height: 100px;margin-left: 50px;align-items: center;display: flex;justify-content: space-around;flex-flow: row;flex-direction: row">
          <div style="width: 100px;height: 70px;border: 1px solid #000;">
            <img src="../../static/details/dimg02.jpg" width="100%" alt="">
          </div>
          <div style="width: 100px;height: 70px;border: 1px solid #000;">
            <img src="../../static/details/dimg02.jpg" width="100%" alt="">
          </div>
          <div style="width: 100px;height: 70px;border: 1px solid #000;">
            <img src="../../static/details/dimg02.jpg" width="100%" alt="">
          </div>
          <div style="width: 100px;height: 70px;border: 1px solid #000;">
            <img src="../../static/details/dimg02.jpg" width="100%" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
  export default {
    name: "HelloWorld",
    data() {
      return {

      };
    },
  }
</script>
<style>

  .el-carousel__item{
    width: 500px;
  }

  .el-carousel__item:nth-child(2n) {
    /*background-color: #99a9bf;*/
  }

  .el-carousel__item:nth-child(2n+1) {
    /*background-color: #d3dce6;*/
  }
  .el-carousel__button {
  display: none !important;
  }
  .el-carousel__container{
    height: 100px;
    border: 1px solid blue;
  }
</style>
